<template>
    <div class="Orderdetail">
        <Head msg="预约详情"></Head>
        <div class='appointment-list'>
            <div class='list-head'>
                <div class='head-left'>
                    <img :src='info.goods_thumb'/>
                </div>
                <div class='head-right'>
                    <div class='head-title1'>{{info.goods_name}}</div>
                    <!--          <div class='head-title2 nowrap'>{{item.goods_remark}}</div>-->
                    <div class='head-title3 nowrap'>经销商：{{info.shop_name}}</div>
                </div>
            </div>
        </div>

        <div class="log-list" v-for="(item,index) in info.logList" :key="index">
            <div class="log-time">{{item.create_time}}</div>
            <div class="log-title" :class="{'log-active':!index}">
                {{item.note}}
            </div>
        </div>

    </div>


</template>


<script lang="ts">
    import {Component} from 'vue-property-decorator';
    import Sence from '../sence/Sence';
    // import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
    import Head from '@/components/Head.vue';

    @Component({
        components: {
            Head
        },
    })

    export default class Orderdetail extends Sence {
        public id: any = '';
        public info: any = '';
        public type:any=1;

        public mounted(): void {
            this.id = this.$route.query.id;
            this.type=this.$route.query.type;
            this.datementInfo();
        }

        public datementInfo(): void {
            this.post('api/v1/datementInfo', {id: this.id,type:this.type}).then((res: any) => {
                this.info = res.data;

            });
        }


    }
</script>

<style scoped lang="stylus">
    .Orderdetail
        background #efeff4
        min-height 100vh

    .scroll-body
        height calc(100vh - 45px)

    .appointment-list {
        display: flex;
        flex-direction: column;
        padding: 0 5vw;
        background: white;
    }

    .list-head {
        display: flex;
        flex-direction: row;
        padding: 5vw 0;
    }

    .head-left,
    .head-left img {
        width: 100px;
        height: 75px;
    }

    .head-right {
        width: calc(100vw - 13vw - 100px);
        display: flex;
        flex-direction: column;
        align-items flex-start
        margin-left: 3vw;
        justify-content: space-around;
    }

    .head-title1 {
        font-size: 16px;
        text-align left;
        line-height 20px;
    }

    .head-title2 {
        font-size: 16px;
    }

    .head-title3 {
        color: gray;
        font-size 16px;
    }

    .log-list
        display flex
        flex-direction column
        align-items center

    .log-time
        padding 15px 0
        font-size 14px
        color #808080
        font-weight bold

    .log-title
        text-align left
        width 85vw
        border-radius 8px
        padding 10px
        font-weight bold
        font-size: 14px
        background white
        line-height 20px
        word-break break-all

    .log-active
        color #ff6347


</style>
